<template>
    <div>
        <Headline
                :headline1="$t('m.SystemManagement') + '  /  '"
                :headline2="$t('m.ParameterSetting')"
        />
        <a-card style="width: 100%">
            {{ $t("m.ParameterClassification") }}：
            <a-select
                    style="width: 120px; margin-right: 20px"
                    v-model="changeParams"
                    @change="handleChange"
            >
                <a-select-option
                        :value="item.name"
                        v-for="item in selectList"
                        :key="item.name"
                >
                    {{ item.name }}
                </a-select-option>
            </a-select>
            <a-button
                    icon="plus"
                    type="primary"
                    style="margin-right: 15px"
                    v-if="isTrue('sys:parameter:addtype')"
                    @click="addA"
            >
                {{ $t("m.AddParameterClassification") }}
            </a-button>
            <a-button
                    icon="delete"
                    type="danger"
                    style="margin-right: 15px"
                    v-if="isTrue('sys:parameter:deltype')"
                    @click="delA"
            >
                {{ $t("m.DelParameterClassification") }}
            </a-button>
            <a-button
                    icon="plus"
                    type="primary"
                    style="margin-right: 15px"
                    v-if="isTrue('sys:parameter:add')"
                    @click="addB"
            >
                {{ $t("m.AddParameterSetting") }}
            </a-button>
            <a-table
                    style="margin-top: 20px"
                    :rowKey="(record, i) => i"
                    :data-source="data"
                    :columns="columns"
                    :pagination="false"
                    bordered
            >
                <div slot="del" slot-scope="text, tags, i">
                    <a-button type="primary"
                              style="margin-right:15px;"
                              @click="edit(text, tags, i)">{{$t('m.Modification')}}
                    </a-button>
                    <a-button
                            type="danger"
                            :disabled="!isTrue('sys:parameter:del')"
                            @click="del(text, tags, i)"
                    >{{ $t("m.Delete") }}
                    </a-button
                    >
                </div>
            </a-table>
        </a-card>
        <Delete ref="delOk" :dalete="dalete" @confirm="delIsok"/>
        <Delete ref="delOkA" :dalete="huadalete" @confirm="delIsokA"/>
        <a-modal
                :title="$t('m.AddParameterClassification')"
                :visible="visibleA"
                @ok="handleOkA"
                :cancelText="$t('m.Cancel')"
                :okText="$t('m.Ok')"
                @cancel="handleCancelA"
        >
            <a-form :form="form">
                <a-form-item style="display: flex" label="分类名称">
                    <a-input
                            v-decorator="['nameA',{ rules: [{ required: true, message: '请输入分类名称' }] },]"
                            style="width: 400px" v-model="nameA" type="text"/>
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal
                :title="$t('m.AddParameterSetting')"
                :visible="visibleB"
                @cancel="handleCancelB"
                :footer="null"
        >
            <a-form
                    :form="form"
                    :label-col="{ span: 7 }"
                    :wrapper-col="{ span: 12 }"
                    @submit="handleSubmit"
            >
                <a-form-item :label="$t('m.ParameterName')">
                    <a-input
                            :disabled="flag!==true"
                            v-decorator="[
              'title',
              {
                rules: [{ required: true, message: 'Please input your note!' }],
              },
            ]"
                    />
                </a-form-item>
                <a-form-item label="key">
                    <a-input
                            :disabled="flag!==true"
                            v-decorator="[
              'cName',
              {
                rules: [{ required: true, message: 'Please input your note!' }],
              },
            ]"
                    />
                </a-form-item>
                <a-form-item :label="$t('m.Value')">
                    <a-input
                            v-decorator="[
              'cValue',
              {
                rules: [
                  { required: false, message: 'Please input your note!' },
                ],
              },
            ]"
                    />
                </a-form-item>
                <a-form-item :label="$t('m.FormatSpecification')">
                    <a-input
                            v-decorator="[
              'desc',
              {
                rules: [{ required: true, message: 'Please input your note!' }],
              },
            ]"
                    />
                </a-form-item>
                <a-form-item :label="$t('m.Sort')">
                    <a-input
                            v-decorator="[
              'sort',
              {
                rules: [
                  { required: false, message: 'Please input your note!' },
                ],
              },
            ]"
                    />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                    <a-button type="primary" html-type="submit"> {{$t('m.Submit')}}</a-button>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import Headline from "@/components/Headline";
    import Delete from "@/components/Delete";
    import {
        deleteNodeDate,
        deleteSysConfig,
        getNodeData,
        getSysConfigList,
        saveNodeData,
        saveSysConfig,
        updateCustNodeData
    } from "@/api/systemmanagement";
    import {Setperms} from "@/assets/js/setperms";

    export default {
        name: "ParameterSetting",
        components: {Headline, Delete},
        data() {
            return {
                checkNick: false,
                form: this.$form.createForm(this, {name: 'dynamic_rule'}),
                flag: true,
                selectList: [],
                data: [],
                dalete: {
                    titles: this.$t("m.DeleteThePrompt"),
                    type: "exclamation-point",
                    text: this.$t("m.AreYouSureToDeleteThisData"),
                },
                huadalete: {
                    titles: this.$t("m.DeleteThePrompt"),
                    type: "exclamation-point",
                    text: this.$t("m.AreYouSureToDeleteThisData"),
                },
                columns: [
                    {title: this.$t("m.Name"), dataIndex: "title"},
                    {title: this.$t("m.Value"), dataIndex: "cValue"},
                    {title: this.$t("m.Specification"), dataIndex: "desc"},
                    {title: this.$t("m.Parameter"), dataIndex: "cName"},
                    {
                        title: this.$t("m.Operation"),
                        scopedSlots: {customRender: "del"},
                    },
                ],
                delParams: {},
                changeParams: "",
                visibleA: false,
                nameA: "",
                visibleB: false,
                form: this.$form.createForm(this, {name: "coordinated"}),
            };
        },
        created() {
            getSysConfigList()
                .then((res) => {
                    console.log(res.data);
                    this.selectList = res.data;
                    this.changeParams = res.data[0].name
                    getNodeData({params: {pathName: this.changeParams}})
                        .then((res) => {
                            this.data = res.data;
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                })
                .catch((err) => {
                    console.log(err);
                });
            // this.run()
            this.parms = Setperms(
                this.$route.fullPath,
                JSON.parse(sessionStorage.getItem("menu"))
            );
            console.log(this.parms);
        },
        methods: {
            run() {
                Promise.all([
                    this.getsysList(),
                    this.getNodeDataList()
                ]).then(res => {
                    /* 你的逻辑代码 */
                    console.log("run");
                })
            },
            isTrue(str) {
                return this.parms.indexOf(str) !== -1;
            },
            edit(text, tags, i) {
                this.flag = false
                this.visibleB = true;
                setTimeout(() => {
                    this.form.setFieldsValue({
                        title: tags.title,
                        cValue: tags.cValue,
                        cName: tags.cName,
                        desc: tags.desc,
                        sort: tags.sort
                    })
                }, 200);
                console.log(tags)
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        values["pathName"] = this.changeParams;
                        if (this.flag == true) {

                            saveNodeData(values)
                                .then((res) => {
                                    if (res.data.success == true) {
                                        this.getNodeDataList();
                                        this.$message.success(res.data.msg);
                                    }
                                    if (res.data.success == false) {
                                        this.$message.error(res.data.msg);
                                    }
                                    this.form.resetFields();
                                })
                                .catch((err) => {
                                    console.log(err);
                                    this.$message.error("操作失败");
                                });
                        } else {
                            let demo = {}
                            demo.pathName = values.pathName
                            demo.cName = values.cName
                            demo.cValue = values.cValue
                            updateCustNodeData(demo)
                                .then(res => {
                                    if (res.data.success == true) {
                                        this.getNodeDataList();
                                        this.$message.success(res.data.msg);
                                    }
                                    if (res.data.success == false) {
                                        this.$message.error(res.data.msg);
                                    }
                                    this.form.resetFields();
                                })
                                .catch((err) => {
                                    console.log(err);
                                    this.$message.error("操作失败");
                                });
                        }


                        this.visibleB = false;
                        console.log(values);
                        this.form.resetFields()
                    }
                });
            },
            handleCancelB() {
                this.form.resetFields();
                this.visibleB = false;
            },
            addB() {
                if (this.changeParams == "") return this.$message.error("请选择参数分类");
                this.flag = true
                this.visibleB = true;
            },
            delIsokA() {
                deleteSysConfig({pathName: this.changeParams})
                    .then((res) => {
                        if (res.data.success == true) {
                            this.getsysList();
                            this.$message.success(res.data.msg);
                            this.changeParams = "";
                        }
                        if (res.data.success == false) {
                            this.$message.error(res.data.msg);
                        }
                        console.log(res);
                    })
                    .catch((err) => {
                        this.$message.error("操作失败");
                        console.log(err);
                    });
                this.$refs.delOkA.visible = false;
            },
            delA() {
                if (this.changeParams == "") return this.$message.error("请选择参数分类");
                this.$refs.delOkA.visible = true;
            },
            handleOkA() {
                this.form.validateFields(err => {
                    if (!err) {
                        console.info('success');
                    }
                });
                if (this.nameA != "") {
                    saveSysConfig({pathName: this.nameA})
                        .then((res) => {
                            if (res.data.success == true) {
                                this.getsysList();
                                this.$message.success(res.data.msg);
                            }
                            if (res.data.success == false) {
                                this.$message.error(res.data.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error("操作失败");
                        });
                    this.visibleA = false;
                    this.nameA = "";
                }
            },
            handleCancelA() {
                this.visibleA = false;
            },
            addA() {
                this.visibleA = true;
            },
            delIsok() {
                deleteNodeDate({...this.delParams})
                    .then((res) => {
                        if (res.data.success == true) {
                            this.getNodeDataList();
                            this.$message.success(res.data.msg);
                        }
                        if (res.data.success == false) {
                            this.$message.error(res.data.msg);
                        }
                    })
                    .catch((err) => {
                        if (res.data.success == false) {
                            this.$message.error("操作失败");
                        }
                    });
                this.$refs.delOk.visible = false
            },
            del(text, tags, i) {
                this.$refs.delOk.visible = true;
                this.delParams = tags;
            },
            handleChange(e) {
                this.changeParams = e;
                this.getNodeDataList();
            },
            getNodeDataList() {
                getNodeData({params: {pathName: this.changeParams}})
                    .then((res) => {
                        this.data = res.data;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            getsysList() {
                getSysConfigList()
                    .then((res) => {
                        console.log(res.data);
                        this.selectList = res.data;
                        this.changeParams = res.data[0].name
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
        },
    };
</script>

<style>
</style>
